<template>
  <div class="content">
    <!-- <Row v-for="(comInfo, key) in initLocation" :key="key" :style="getRowLocal(key)">
      <i-col v-for="(item, index) in comInfo" :key="index" style="width:100px"
        :offset="setIColOffset(comInfo, item, index)">
        <component
          :is="item.component.name"
          :value="item.component.value"
          :config="item.component.config"
          :style="[item.component.style, getLocal(item.layout)]"
        ></component>
      </i-col>
    </Row> -->
    <!-- <div class="flex_box" v-for="(comInfo, key) in initLocation" :key="key" :style="getRowLocal(key, comInfo)">
      <div v-for="(item, ind) in comInfo.components" :key="ind" :class="{flex_auto : item.id === comInfo.flexAutoId}" :style="getColLocal(item, comInfo.w)">
        <component
          :is="item.name"
          :value="item.value"
          :config="item.config"
          :style="[item.style, getLocal(comInfo.layout[ind])]"
        ></component>
      </div>
    </div> -->
    <grid-layout
      :layout.sync="layout"
      :col-num="24"
      :row-height="30"
      :is-draggable="false"
      :is-resizable="false"
      :is-mirrored="false"
      :vertical-compact="false"
      :margin="[grid.horizontal, grid.vertical]"
      :use-css-transforms="true"
    >
      
      <grid-item
        v-for="(item,index) in layout"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
        :ref="components[index].id"
        :style="components[index].style"
        :class="{'active': activeIndex === index}"
      >
        <component
          :is="components[index].name"
          :value="components[index].value"
          :config="components[index].config"
        ></component>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import VueGridLayout from 'vue-grid-layout';

import textItem from '@/pages/Mark/Middle/Basic/TextItem';
import inputItem from '@/pages/Mark/Middle/Basic/InputItem';
import selectItem from '@/pages/Mark/Middle/Basic/SelectItem';
import switchItem from '@/pages/Mark/Middle/Basic/SwitchItem';
import datepickerItem from '@/pages/Mark/Middle/Basic/DatepickerItem';
import buttonItem from '@/pages/Mark/Middle/Basic/ButtonItem';
import checkboxItem from '@/pages/Mark/Middle/Basic/CheckboxItem';
import radioItem from '@/pages/Mark/Middle/Basic/RadioItem';
import checkboxgroupItem from '@/pages/Mark/Middle/Basic/CheckboxgroupItem';
import radiogroupItem from '@/pages/Mark/Middle/Basic/RadiogroupItem';
import rateItem from '@/pages/Mark/Middle/Basic/RateItem';
import tableItem from '@/pages/Mark/Middle/Basic/TableItem';
export default {
  name: 'MarkContent',
  data() {
    return {
    }
  },
  computed: {
    ...mapState({
      layout: state => state.mark.layout,
      components: state => state.mark.components,
       grid: state => state.mark.grid
    }),
    initLocation(){
      let differentiate = {}
      // 按列进行分类
      this.layout.forEach((layouts, ind)=>{
          if(!differentiate[layouts.y]){
            differentiate[layouts.y] = [{
              layout: layouts,
              component: this.components[ind]
            }]
          } else {
            differentiate[layouts.y].push({
              layout: layouts,
              component: this.components[ind]
            })
          }
      })
      let myLocation = {};
      Object.keys(differentiate).forEach((key) => {
        let flexW = 0;
        myLocation[key] = {}
        myLocation[key].layout = []
        myLocation[key].components = []
        differentiate[key].forEach((item, ind)=>{
          flexW += item.layout.w  
          if(!item.component.config.fixWidth){ // 非定宽
            myLocation[key].flexAutoId = item.component.id
          }
          myLocation[key].layout.push(item.layout)
          myLocation[key].components.push(item.component)
        })
        myLocation[key].w = flexW // flexW
        myLocation[key].left = differentiate[key][0].layout.x  // flexL
      })
      return myLocation
    }
  },
  methods: {
    getLocal(layouts){
      return {
        width: '100%',
        // height: (layouts.height ? layouts.height : layouts.h * 30) + 'px',
        height: (layouts.height ? layouts.height : layouts.h * 30) + 'px',
      }
    },
    getRowLocal(top, item){
      return {
        width: (item.w / 24 * 100) + '%',
        top: ( top * 30 ) + 'px',
        position: 'absolute',
        left: (item.left / 24 * 100) + '%'
      }
    },
    getColLocal(component, parentW){
      return {
        width: component.config.fixWidth ? component.location.width +'px' : (component.location.w / parentW * 100) + '%',
        height: component.location.height
      }
    },
    // setIColOffset(comInfo, item, index){
    //   if(comInfo[index - 1]){
    //     return (item.layout.x - comInfo[index - 1].layout.x - comInfo[index - 1].layout.w )
    //   } else {
    //     return item.layout.x
    //   }
    // }
  },
  components: {
    textItem,
    inputItem,
    switchItem,
    selectItem,
    datepickerItem,
    buttonItem,
    checkboxItem,
    radioItem,
    checkboxgroupItem,
    radiogroupItem,
    rateItem,
    tableItem,
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem
  },
}
</script>

<style lang="less" scoped>
.content {
    position: fixed;
    left: 0;
    top: 100px;
    bottom: 0px;
    right: 0px;
}
.flex_box{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.flex_auto{
  flex:1;
}

</style>
